<template>
  <div>
    <router-view></router-view>
    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="index">
        首页
        <img
          src="../assets/main_1.png"
          v-if="selected == 'index'"
          slot="icon"
        />
        <img src="../assets/main_0.png" v-else slot="icon" />
      </mt-tab-item>
      <mt-tab-item id="me"
        >我的
        <img src="../assets/me_1.png" v-if="selected == 'me'" slot="icon" />
        <img src="../assets/me_0.png" v-else slot="icon" />
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: this.$route.path.split('/').pop(),
    };
  },
  watch: {
    // 监听selected的变化
    selected(newValue, oldValue) {
      this.$router.push(newValue)
      // if(newValue =='me'){
      //   this.$router.push('/home/me')
      // }else{
      //   this.$router.push('/home/index')
      // }
    }
  },
};
</script>